<template>
  <page-content :left="true">
    <lz-form
      ref="form"
      :get-data="getData"
      :submit="onSubmit"
      :errors.sync="errors"
      :form.sync="form"
      :inDialog="false"
    >
      <template v-for="j of configs">
        <a-divider v-if="j.group" orientation="left">
          {{j.group}}
        </a-divider>
        <template v-for="i of j.list">
          <lz-form-item
            :key="i.id"
            :prop="i.slug"
            :label="i.name"
            :tip="i.desc"
            :required="checkRequired(i)"
          >
            <type-input
              v-model="form[i.slug]"
              :type="i.type"
              :options="i.options"
              :form_disabled="i.form_disabled"
              :label="i.name"
              :config_options="i.options"
            />
          </lz-form-item>
        </template>
      </template>
    </lz-form>
    <div>
      <a-anchor
        :affix="true"
        :get-current-anchor="getCurrentAnchor"
        :target-offset="targetOffset"
      >
        <template v-for="j of configs">
          <a-anchor-link 
            :title="`${j.group}`"
          >
            <template  v-for="i of j.list">
              <a-anchor-link 
                v-if="edit"
                :title="i.name" 
                :href="`#/worship-artists/`+$route.params.id+`/edit${$route.hash && $route.hash.includes(i.slug) ? $route.hash : '#'+i.slug}`" 
              />
              <a-anchor-link 
                v-else
                :title="i.name" 
                :href="`#/worship-artists/create${$route.hash && $route.hash.includes(i.slug) ? $route.hash : '#'+i.slug}`" 
              />
            </template>
          </a-anchor-link>
        </template>
      </a-anchor>
    </div>
  </page-content>
</template>

<script>
import LzForm from '@c/LzForm'
import LzFormItem from '@c/LzForm/LzFormItem'
import PageContent from '@c/PageContent'
import TypeInput from '../configs/components/TypeInput'
import { mapConstants } from '@/libs/constants'
import { changeForm,checkRequired,generateToken } from '@/libs/utils'
import {
  createWorshipArtist,
  editWorshipArtist,
  storeWorshipArtist,
  updateWorshipArtist,
} from '@/api/worship-artists'
import {
  getFormField,
} from '@/api/field'

export default {
  name: 'Form',
  components: {
    TypeInput,
    LzForm,
    LzFormItem,
    PageContent
  },
  data() {
    return {
      edit: false,
      form: {},
      errors: {},
      configs: [],
      targetOffset: undefined,
      token: null
    }
  },
  mounted() {
    this.targetOffset = window.innerHeight / 2;
    this.token = generateToken();
  },
  computed: {
    ...mapConstants(['CONFIG_TYPES']),
  },
  methods: {
    checkRequired,
    async getData($form) {
      let data
      if ($form.realEditMode) {
        ({ data } = await editWorshipArtist($form.resourceId))
        this.getFormField(this.$route.meta.id, data)
        this.edit = true
      } else {
        await createWorshipArtist()
        const { data } = await getFormField(this.$route.meta.id)
        this.configs = data
        const form = {}
        data.forEach((i) => {
          i.list.forEach((j) => {
            form[j.slug] = j.value
          })
        })
        this.form = { ...this.form, ...form };
      }
    },
    async getFormField(id, info) {
      const { data } = await getFormField(id)
      this.configs = data
      this.form = { ...this.form, ...changeForm(data, info) };
    },
    async onSubmit($form) {
      const requestData = {
        ...(this.form || {}),
        token: this.token,
      };
      if (this.edit) {
        await updateWorshipArtist($form.resourceId, requestData)
      } else {
        await storeWorshipArtist(requestData)
      }
    },
    getCurrentAnchor() {
      if (this.edit) {
        return '#/worship-artists/create'+this.$route.hash;
      } else {
        return '#/worship-artists/'+this.$route.params.id+'/edit'+this.$route.hash
      }
    },
  },
}
</script>
<style>
.ant-anchor-wrapper {
  margin-left: 30px;
}
</style>